{% extends "base.html" %}

{% block title %}查看消费记录{% endblock %}

{% block content %}
<h2 class="mb-3">消费记录</h2>

<!-- 筛选月份 -->
<div class="row mb-3">
    <div class="col-md-4">
        <form method="get" action="{{ url_for('view_expenses') }}" class="d-flex align-items-center">
            <select name="year" class="form-select me-2" style="width: auto;">
                {% for year in range(2020, datetime.now().year + 1) %}
                <option value="{{ year }}" {% if year==selected_year %}selected{% endif %}>{{ year }}</option>
                {% endfor %}
            </select>
            <select name="month" class="form-select me-2" style="width: auto;">
                <option value="0" {% if selected_month==0 %}selected{% endif %}>所有月份</option>
                {% for month in range(1, 13) %}
                <option value="{{ month }}" {% if month==selected_month %}selected{% endif %}>{{ month }}</option>
                {% endfor %}
            </select>
            <button type="submit" class="btn btn-primary">筛选</button>
        </form>
    </div>
    <div class="col-md-8 text-end">
        <a href="{{url_for('add_expense')}}">添加消费记录</a>
        <h4>当月已消费总额: {{ total_spent | round(2) }} 元</h4>
    </div>
</div>

<!-- 消费记录表格 -->
<table class="table table-bordered table-striped text-center">
    <thead class="table-dark">
        <tr>
            <th>序号</th>
            <th>日期</th>
            <th>内容</th>
            <th>金额</th>
            <th>支付方式</th>
            <th>类别</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        {% if expenses %}
        {% for expense in expenses %}
        <tr>
            <td>{{ loop.index + (pagination.page - 1) * pagination.per_page }}</td>
            <td>{{ expense.date }}</td>
            <td>{{ expense.description }}</td>
            <td>{{ expense.amount }}</td>
            <td>{{ expense.payment_method }}</td>
            <td>{{ expense.category }}</td>
            <td>
                <a href="{{ url_for('edit_expense', id=expense.id) }}" class="btn btn-danger btn-sm">编辑</a>
                <button class="btn btn-danger btn-sm" onclick="showDeleteModal({{ expense.id }})">删除</button>
            </td>
        </tr>
        {% endfor %}
        {% else %}
        <tr>
            <td colspan="7">没有找到该月份的消费记录。</td>
        </tr>
        {% endif %}
    </tbody>
</table>

<!-- 删除确认模态框 -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">确认删除</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                你确定要删除这条记录吗？
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <a id="confirmDeleteBtn" href="#" class="btn btn-danger">删除</a>
            </div>
        </div>
    </div>
</div>

<script>
    function showDeleteModal(expenseId) {
        var deleteUrl = "{{ url_for('delete_expense', id=0) }}".replace('0', expenseId);
        document.getElementById('confirmDeleteBtn').setAttribute('href', deleteUrl);
        var deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
        deleteModal.show();
    }
</script>
{% endblock %}